/**
 * 沉浸模式图标（头盔眼镜）
 * @param radio 画布大小比例
 * @param color 颜色
 * @returns 数据地址
 */
const ImmersiveImage = (radio?: number, color?: string) => {
    const r = radio || 1;
    const col = color || '#ffffff';
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 40 * r;
    const ctx = canvas.getContext('2d')!;

    ctx.save();
    ctx.strokeStyle = "rgba(0,0,0,0)";
    ctx.miterLimit = 4;
    ctx.scale(0.017, 0.017);
    ctx.save();
    ctx.fillStyle = col;
    ctx.translate(1180 * r, 1222 * r);
    ctx.rotate(3.141592653589793);
    ctx.translate(-1024 * r, -576 * r);
    ctx.beginPath();
    ctx.moveTo(1300 * r, 900 * r);
    ctx.lineTo(800 * r, 900 * r);
    ctx.lineTo(800 * r, 760 * r);
    ctx.lineTo(1300 * r, 760 * r);
    ctx.lineTo(1300 * r, 900 * r);
    ctx.closePath();
    ctx.moveTo(1024 * r, 1152 * r);
    ctx.quadraticCurveTo(1083 * r, 1152 * r, 1156.5 * r, 1150.5 * r);
    ctx.quadraticCurveTo(1230 * r, 1149 * r, 1311 * r, 1145 * r);
    ctx.quadraticCurveTo(1392 * r, 1141 * r, 1475.5 * r, 1133.5 * r);
    ctx.quadraticCurveTo(1559 * r, 1126 * r, 1638.5 * r, 1113.5 * r);
    ctx.quadraticCurveTo(1718 * r, 1101 * r, 1788.5 * r, 1083.5 * r);
    ctx.quadraticCurveTo(1859 * r, 1066 * r, 1913 * r, 1042 * r);
    ctx.quadraticCurveTo(1936 * r, 1031 * r, 1955 * r, 1018 * r);
    ctx.quadraticCurveTo(1974 * r, 1005 * r, 1993 * r, 988 * r);
    ctx.quadraticCurveTo(2020 * r, 963 * r, 2034 * r, 926.5 * r);
    ctx.quadraticCurveTo(2048 * r, 890 * r, 2048 * r, 854 * r);
    ctx.lineTo(2048 * r, 597 * r);
    ctx.quadraticCurveTo(2048 * r, 474 * r, 2001 * r, 365 * r);
    ctx.quadraticCurveTo(1954 * r, 256 * r, 1873 * r, 175 * r);
    ctx.quadraticCurveTo(1792 * r, 94 * r, 1683 * r, 47 * r);
    ctx.quadraticCurveTo(1574 * r, 0, 1451 * r, 0);
    ctx.lineTo(1370 * r, 0);
    ctx.quadraticCurveTo(1333 * r, 0, 1301.5 * r, 14 * r);
    ctx.quadraticCurveTo(1270 * r, 28 * r, 1241 * r, 48.5 * r);
    ctx.quadraticCurveTo(1212 * r, 69 * r, 1185.5 * r, 93.5 * r);
    ctx.quadraticCurveTo(1159 * r, 118 * r, 1132.5 * r, 138.5 * r);
    ctx.quadraticCurveTo(1106 * r, 159 * r, 1079.5 * r, 173 * r);
    ctx.quadraticCurveTo(1053 * r, 187 * r, 1024 * r, 187 * r);
    ctx.quadraticCurveTo(995 * r, 187 * r, 968.5 * r, 173 * r);
    ctx.quadraticCurveTo(942 * r, 159 * r, 915.5 * r, 138.5 * r);
    ctx.quadraticCurveTo(889 * r, 118 * r, 862.5 * r, 93.5 * r);
    ctx.quadraticCurveTo(836 * r, 69 * r, 807 * r, 48.5 * r);
    ctx.quadraticCurveTo(778 * r, 28 * r, 746.5 * r, 14 * r);
    ctx.quadraticCurveTo(715 * r, 0, 678 * r, 0);
    ctx.lineTo(597 * r, 0);
    ctx.quadraticCurveTo(474 * r, 0, 365 * r, 47 * r);
    ctx.quadraticCurveTo(256 * r, 94 * r, 175 * r, 175 * r);
    ctx.quadraticCurveTo(94 * r, 256 * r, 47 * r, 365 * r);
    ctx.quadraticCurveTo(0, 474 * r, 0, 597 * r);
    ctx.lineTo(0, 854 * r);
    ctx.quadraticCurveTo(0, 922 * r, 38 * r, 969 * r);
    ctx.quadraticCurveTo(76 * r, 1016 * r, 135 * r, 1042 * r);
    ctx.quadraticCurveTo(189 * r, 1066 * r, 259.5 * r, 1083.5 * r);
    ctx.quadraticCurveTo(330 * r, 1101 * r, 409.5 * r, 1113.5 * r);
    ctx.quadraticCurveTo(489 * r, 1126 * r, 572.5 * r, 1133.5 * r);
    ctx.quadraticCurveTo(656 * r, 1141 * r, 737 * r, 1145 * r);
    ctx.quadraticCurveTo(818 * r, 1149 * r, 891.5 * r, 1150.5 * r);
    ctx.quadraticCurveTo(965 * r, 1152 * r, 1024 * r, 1152 * r);
    ctx.closePath();
    const rx = r * 0.96;
    const ry = r * 0.9;
    const x = r * 40;
    const y = r * 65;
    ctx.moveTo(1963 * rx + x, 854 * ry + y);
    ctx.quadraticCurveTo(1963 * rx + x, 893 * ry + y, 1938.5 * rx + x, 921 * ry + y);
    ctx.quadraticCurveTo(1914 * rx + x, 949 * ry + y, 1880 * rx + x, 963 * ry + y);
    ctx.quadraticCurveTo(1826 * rx + x, 986 * ry + y, 1758 * rx + x, 1002.5 * ry + y);
    ctx.quadraticCurveTo(1690 * rx + x, 1019 * ry + y, 1614.5 * rx + x, 1030.5 * ry + y);
    ctx.quadraticCurveTo(1539 * rx + x, 1042 * ry + y, 1459 * rx + x, 1049.5 * ry + y);
    ctx.quadraticCurveTo(1379 * rx + x, 1057 * ry + y, 1302 * rx + x, 1060.5 * ry + y);
    ctx.quadraticCurveTo(1225 * rx + x, 1064 * ry + y, 1153.5 * rx + x, 1065.5 * ry + y);
    ctx.quadraticCurveTo(1082 * rx + x, 1067 * ry + y, 1024 * rx + x, 1067 * ry + y);
    ctx.quadraticCurveTo(965 * rx + x, 1067 * ry + y, 894 * rx + x, 1065.5 * ry + y);
    ctx.quadraticCurveTo(823 * rx + x, 1064 * ry + y, 746 * rx + x, 1060.5 * ry + y);
    ctx.quadraticCurveTo(669 * rx + x, 1057 * ry + y, 589 * rx + x, 1049.5 * ry + y);
    ctx.quadraticCurveTo(509 * rx + x, 1042 * ry + y, 433.5 * rx + x, 1030.5 * ry + y);
    ctx.quadraticCurveTo(358 * rx + x, 1019 * ry + y, 290 * rx + x, 1002.5 * ry + y);
    ctx.quadraticCurveTo(222 * rx + x, 986 * ry + y, 168 * rx + x, 963 * ry + y);
    ctx.quadraticCurveTo(134 * rx + x, 949 * ry + y, 109.5 * rx + x, 921 * ry + y);
    ctx.quadraticCurveTo(85 * rx + x, 893 * ry + y, 85 * rx + x, 854 * ry + y);
    ctx.lineTo(85 * rx + x, 597 * ry + y);
    ctx.quadraticCurveTo(85 * rx + x, 491 * ry + y, 125.5 * rx + x, 398 * ry + y);
    ctx.quadraticCurveTo(166 * rx + x, 305 * ry + y, 235.5 * rx + x, 235.5 * ry + y);
    ctx.quadraticCurveTo(305 * rx + x, 166 * ry + y, 398 * rx + x, 126 * ry + y);
    ctx.quadraticCurveTo(491 * rx + x, 86 * ry + y, 597 * rx + x, 86 * ry + y);
    ctx.lineTo(678 * rx + x, 86 * ry + y);
    ctx.quadraticCurveTo(705 * rx + x, 86 * ry + y, 730 * rx + x, 100 * ry + y);
    ctx.quadraticCurveTo(755 * rx + x, 114 * ry + y, 780 * rx + x, 134.5 * ry + y);
    ctx.quadraticCurveTo(805 * rx + x, 155 * ry + y, 831 * rx + x, 179 * ry + y);
    ctx.quadraticCurveTo(857 * rx + x, 203 * ry + y, 886.5 * rx + x, 223.5 * ry + y);
    ctx.quadraticCurveTo(916 * rx + x, 244 * ry + y, 950 * rx + x, 258 * ry + y);
    ctx.quadraticCurveTo(984 * rx + x, 272 * ry + y, 1024 * rx + x, 272 * ry + y);
    ctx.quadraticCurveTo(1064 * rx + x, 272 * ry + y, 1098 * rx + x, 258 * ry + y);
    ctx.quadraticCurveTo(1132 * rx + x, 244 * ry + y, 1161.5 * rx + x, 223.5 * ry + y);
    ctx.quadraticCurveTo(1191 * rx + x, 203 * ry + y, 1217 * rx + x, 179 * ry + y);
    ctx.quadraticCurveTo(1243 * rx + x, 155 * ry + y, 1268 * rx + x, 134.5 * ry + y);
    ctx.quadraticCurveTo(1293 * rx + x, 114 * ry + y, 1318 * rx + x, 100 * ry + y);
    ctx.quadraticCurveTo(1343 * rx + x, 86 * ry + y, 1370 * rx + x, 86 * ry + y);
    ctx.lineTo(1384 * rx + x, 86 * ry + y);
    ctx.quadraticCurveTo(1421 * rx + x, 86 * ry + y, 1454 * rx + x, 86.5 * ry + y);
    ctx.quadraticCurveTo(1487 * rx + x, 87 * ry + y, 1518.5 * rx + x, 91 * ry + y);
    ctx.quadraticCurveTo(1550 * rx + x, 95 * ry + y, 1582 * rx + x, 103 * ry + y);
    ctx.quadraticCurveTo(1614 * rx + x, 111 * ry + y, 1650 * rx + x, 126 * ry + y);
    ctx.quadraticCurveTo(1721 * rx + x, 156 * ry + y, 1778.5 * rx + x, 204.5 * ry + y);
    ctx.quadraticCurveTo(1836 * rx + x, 253 * ry + y, 1877 * rx + x, 314.5 * ry + y);
    ctx.quadraticCurveTo(1918 * rx + x, 376 * ry + y, 1940.5 * rx + x, 448 * ry + y);
    ctx.quadraticCurveTo(1963 * rx + x, 520 * ry + y, 1963 * rx + x, 597 * ry + y);
    ctx.lineTo(1963 * rx + x, 854 * ry + y);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();

    return canvas.toDataURL('image/png');
}


export { ImmersiveImage };